<template>
  <div v-if="cardData" class="go-items-list-card">
    <n-card hoverable size="small">
      <div class="list-content">
        <!-- 顶部按钮 -->
        <div class="list-content-top">
          <mac-os-control-btn
            class="top-btn"
            :hidden="['remove']"
            @close="deleteHanlde"
            @resize="resizeHandle"
          ></mac-os-control-btn>
        </div>
        <!-- 中间 -->
        <div class="list-content-img" @click="resizeHandle">
          <n-image
            object-fit="contain"
            height="180"
            preview-disabled
            :src="cardData.content.coverImg"
            :fallback-src="requireErrorImg()"
          ></n-image>
        </div>
      </div>
      <template #action>
        <div class="go-flex-items-center list-footer" justify="space-between">
          <div class="page-title">
            <n-text class="go-ellipsis-1 page-name">
              {{ cardData.content.name || '' }}
            </n-text>
            <n-divider vertical />
            <n-ellipsis class="page-desc" style="max-width: 100px; font-size: 12px; color: #666">
              {{ cardData.content.desc || '' }}
            </n-ellipsis>
          </div>

          <!-- 工具 -->
          <div class="go-flex-items-center list-footer-ri">
            <n-space>
              <template v-for="item in fnBtnList.filter(item => !item.isHide)" :key="item.key">
                <template v-if="item.key === 'select'">
                  <n-dropdown
                    trigger="hover"
                    placement="bottom"
                    :options="selectOptionsCom"
                    :show-arrow="true"
                    @select="handleSelect"
                  >
                    <n-button size="small">
                      <template #icon>
                        <component :is="item.icon"></component>
                      </template>
                    </n-button>
                  </n-dropdown>
                </template>

                <n-tooltip v-else placement="bottom" trigger="hover">
                  <template #trigger>
                    <n-button size="small" @click="handleSelect(item.key)">
                      <template #icon>
                        <component :is="item.icon"></component>
                      </template>
                    </n-button>
                  </template>
                  <component :is="item.label"></component>
                </n-tooltip>
              </template>
            </n-space>
          </div>
          <!-- end -->
        </div>
      </template>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, PropType, computed } from 'vue'
import {
  renderIcon,
  renderLang,
  requireErrorImg,
  setSessionStorage,
  clearSessioStorage,
  routerTurnByPath,
  fetchPathByName,
  getFirstPath
} from '@/utils'
import { icon } from '@/plugins'
import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn'
import { PageType } from '../../index.d'
import { ProjectType } from '@/views/project/list/index.d'
import { StorageEnum } from '@/enums/storageEnum'
import { PreviewEnum } from '@/enums/pageEnum'
const {
  EllipsisHorizontalCircleSharpIcon,
  CopyIcon,
  TrashIcon,
  PencilIcon,
  DownloadIcon,
  BrowsersOutlineIcon,
  HammerIcon,
  SendIcon
} = icon.ionicons5
const { ObjectStorageIcon } = icon.carbon

const emit = defineEmits(['delete', 'resize', 'edit', 'update', 'setModel'])

const props = defineProps({
  cardData: Object as PropType<PageType>,
  projectInfo: Object as PropType<ProjectType>
})

// 处理url获取
const requireUrl = (name: string) => {
  return new URL(`../../../../../assets/images/${name}`, import.meta.url).href
}

const isPublicTemplate = computed(() => {
  return props.projectInfo?.datasource === 'public_template'
})
const isTemplate = computed(() => {
  return props.projectInfo?.datasource === 'template'
})

const isProject = computed(() => {
  return props.projectInfo?.datasource === 'project'
})
const isPublicProject = computed(() => {
  return props.projectInfo?.datasource === 'project'
})

const isFromPublicProject = computed(() => {
  return props.projectInfo?.content?.from_public
})

const firstPath = computed(() => {
  return getFirstPath()
})

const fnBtnList = reactive([
  {
    label: renderLang('global.r_edit'),
    key: 'edit',
    icon: renderIcon(HammerIcon),
    isHide: (isPublicTemplate.value && firstPath.value !== 'linku') || isFromPublicProject.value
  },
  {
    lable: renderLang('global.r_more'),
    key: 'select',
    icon: renderIcon(EllipsisHorizontalCircleSharpIcon)
  }
])

const selectOptions = ref([
  {
    label: renderLang('global.r_preview'),
    key: 'preview',
    icon: renderIcon(BrowsersOutlineIcon)
  },
  {
    label: '修改',
    key: 'update',
    icon: renderIcon(PencilIcon),
    isHide: (isPublicTemplate.value && firstPath.value !== 'linku') || isFromPublicProject.value
  },
  {
    label: renderLang('global.r_delete'),
    key: 'delete',
    icon: renderIcon(TrashIcon)
  }
])

const selectOptionsCom = computed(() => {
  return selectOptions.value.filter(item => !item.isHide)
})

const handleSelect = (key: string) => {
  switch (key) {
    case 'delete':
      deleteHanlde()
      break
    case 'preview':
      const datasource = props.cardData?.datasource

      const id = props.cardData?.name
      const config: any = props.cardData?.content?.config
      const path = fetchPathByName(PreviewEnum.CHART_PREVIEW_NAME, 'href')
      if (!path) return
      clearSessioStorage(StorageEnum.GO_CHART_STORAGE_LIST)
      // setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ id, ...config }])
      routerTurnByPath(path, ['page', datasource as string, id as string], undefined, true)
      break
    case 'update':
      emit('update', props.cardData)
      break
    case 'edit':
      editHandle()
      break
  }
}

// 删除处理
const deleteHanlde = () => {
  emit('delete', props.cardData)
}

// 编辑处理
const editHandle = () => {
  emit('edit', props.cardData)
}

// 放大处理
const resizeHandle = () => {
  emit('resize', props.cardData)
}
</script>

<style lang="scss" scoped>
$contentHeight: 180px;
@include go('items-list-card') {
  position: relative;
  border-radius: $--border-radius-base;
  border: 1px solid rgba(0, 0, 0, 0);
  @extend .go-transition;
  &:hover {
    @include hover-border-color('hover-border-color');
  }
  .list-content {
    margin-top: 20px;
    margin-bottom: 5px;
    cursor: pointer;
    border-radius: $--border-radius-base;
    @include background-image('background-point');
    @extend .go-point-bg;
    &-top {
      position: absolute;
      top: 10px;
      left: 10px;
      height: 22px;
    }
    &-img {
      height: $contentHeight;
      @extend .go-flex-center;
      @extend .go-border-radius;
      @include deep() {
        img {
          @extend .go-border-radius;
        }
      }
    }
  }
  .list-footer {
    flex-wrap: nowrap;
    justify-content: space-between;
    line-height: 30px;
    &-ri {
      justify-content: flex-end;
      min-width: 120px;
    }
    .page-title {
      display: flex;
      align-items: center;
      .page-name {
        font-size: 16px;
      }
    }
  }
}
</style>
